<div>
  <!-- <nz-card>
    <sf [schema]="schema" (formSubmit)="submit($event)"></sf>
</nz-card> -->
  <!-- <nz-card>
        <button (click)="queryItemDate()">查询</button>
</nz-card> -->
  <nz-card>
    <lb-basic-bar *ngIf="type=='basicbar'&&tfdata" [height]="height" [data]="tfdata" [position]="position"
      [pillarcolor]="chartstyle.pillar.color" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle" [tooltipshowpercent]="chartstyle.tooltip.showpercent">
    </lb-basic-bar>
    <lb-basic-funnel *ngIf="type=='basicfunnel'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [datasort]="chartstyle.data.sort" [labelshow]="chartstyle.label.show"
      [legendshow]="chartstyle.legend.show" [legendposition]="chartstyle.legend.position"
      [legendlayout]="chartstyle.legend.layout" [legendshowpercent]="chartstyle.legend.showpercent"
      [tooltipshow]="chartstyle.tooltip.show" [tooltipshowtitle]="chartstyle.tooltip.showtitle"
      [tooltipshowpercent]="chartstyle.tooltip.showpercent"></lb-basic-funnel>
    <lb-basic-gauge *ngIf="type=='basicgauge'&&tfdata" [height]="height" [data]="tfdata"
      [position]="{'x':1, 'y': 'VAL'}"  [centertitleshow]="chartstyle.centertitle.show"
      [centertitletext]="chartstyle.centertitle.text" [centertitletextsize]="chartstyle.centertitle.textsize"
      [centertitleshowtotal]="chartstyle.centertitle.showtotal"
      [centertitletotalsize]="chartstyle.centertitle.totalsize"
      [arclineradius]="chartstyle.arcline.radius"></lb-basic-gauge>
      <lb-water-wave *ngIf="type=='waterwave'&&tfdata" [height]="height" [data]="tfdata"
      [position]="{'x':1, 'y': 'VAL'}"></lb-water-wave>
    <lb-basic-heatmap *ngIf="type=='basicheatmap'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle"></lb-basic-heatmap>
    <lb-basic-line *ngIf="type=='basicline'&&tfdata" [height]="height" [data]="tfdata" [position]="position"
      [tooltipshow]="chartstyle.tooltip.show" [tooltipshowtitle]="chartstyle.tooltip.showtitle"
      [lineshow]="chartstyle.line.show" [lineshape]="chartstyle.line.shape" [pointshow]="chartstyle.point.show"
      [pointshape]="chartstyle.point.shape" [areashow]=" chartstyle.area.show" [pointsize]="chartstyle.point.size"
      [pointcolor]="chartstyle.point.color"></lb-basic-line>

    <lb-basic-pie *ngIf="type=='basicpie'&&tfdata" [height]="height" [data]="tfdata" [position]="position"
      [labelshow]="chartstyle.label.show" [legendshow]="chartstyle.legend.show"
      [legendposition]="chartstyle.legend.position" [legendlayout]="chartstyle.legend.layout"
      [legendshowpercent]="chartstyle.legend.showpercent"  [legendshowdata]="chartstyle.legend.showdata" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle" [tooltipshowpercent]="chartstyle.tooltip.showpercent"
      [radius1]="chartstyle.radius[1]" [radius0]="chartstyle.radius[0]" [centertitleshow]="chartstyle.centertitle.show"
      [centertitletext]="chartstyle.centertitle.text" [centertitletextsize]="chartstyle.centertitle.textsize"
      [centertitleshowtotal]="chartstyle.centertitle.showtotal"
      [centertitletotalsize]="chartstyle.centertitle.totalsize"></lb-basic-pie>

    <lb-basic-point *ngIf="type=='basicpoint'&&tfdata" [height]="height" [data]="tfdata" [position]="position"
      [tooltipshow]="chartstyle.tooltip.show" [tooltipshowtitle]="chartstyle.tooltip.showtitle"
      [pointshow]="chartstyle.point.show" [pointshape]="chartstyle.point.shape" [pointsize]="chartstyle.point.size"
      [pointcolor]="chartstyle.point.color"></lb-basic-point>
    <lb-basic-radar *ngIf="type=='basicradar'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [legendshow]="chartstyle.legend.show"
      [legendposition]="chartstyle.legend.position" [legendlayout]="chartstyle.legend.layout"
      [tooltipshow]="chartstyle.tooltip.show" [tooltipshowtitle]="chartstyle.tooltip.showtitle"></lb-basic-radar>
    <lb-group-bar *ngIf="type=='groupbar'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle" [legendshow]="chartstyle.legend.show"
      [legendposition]="chartstyle.legend.position" [legendlayout]="chartstyle.legend.layout"></lb-group-bar>
    <lb-group-point *ngIf="type=='grouppoint'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [legendshow]="chartstyle.legend.show"
      [legendposition]="chartstyle.legend.position" [legendlayout]="chartstyle.legend.layout"
      [tooltipshow]="chartstyle.tooltip.show" [tooltipshowtitle]="chartstyle.tooltip.showtitle"
      [pointshow]="chartstyle.point.show" [pointshape]="chartstyle.point.shape" [pointsize]="chartstyle.point.size">
    </lb-group-point>
    <lb-mutiple-line *ngIf="type=='mutipleline'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle" [lineshow]="chartstyle.line.show"
      [lineshape]="chartstyle.line.shape" [pointshow]="chartstyle.point.show" [pointshape]="chartstyle.point.shape"
      [pointsize]="chartstyle.point.size" [pointcolor]="chartstyle.point.color" [legendshow]="chartstyle.legend.show"
      [legendposition]="chartstyle.legend.position" [legendlayout]="chartstyle.legend.layout"></lb-mutiple-line>
    <lb-nightingale-pie *ngIf="type=='nightingalepie'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [labelshow]="chartstyle.label.show" [legendshow]="chartstyle.legend.show"
      [legendposition]="chartstyle.legend.position" [legendlayout]="chartstyle.legend.layout"
      [legendshowpercent]="chartstyle.legend.showpercent" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle" [tooltipshowpercent]="chartstyle.tooltip.showpercent"
      [radius1]="chartstyle.radius[1]" [radius0]="chartstyle.radius[0]" [centertitleshow]="chartstyle.centertitle.show"
      [centertitletext]="chartstyle.centertitle.text" [centertitletextsize]="chartstyle.centertitle.textsize"
      [centertitleshowtotal]="chartstyle.centertitle.showtotal"
      [centertitletotalsize]="chartstyle.centertitle.totalsize"></lb-nightingale-pie>
    <lb-stack-bar *ngIf="type=='stackbar'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle"></lb-stack-bar>
    <lb-stack-line *ngIf="type=='stackline'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle" [lineshow]="chartstyle.line.show"
      [lineshape]="chartstyle.line.shape" [pointshow]="chartstyle.point.show" [pointshape]="chartstyle.point.shape"
      [pointsize]="chartstyle.point.size" [pointcolor]="chartstyle.point.color" [legendshow]="chartstyle.legend.show"
      [legendposition]="chartstyle.legend.position" [legendlayout]="chartstyle.legend.layout"></lb-stack-line>
    <lb-stack-pie *ngIf="type=='stackpie'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position"  [legendshow]="chartstyle.legend.show"
      [legendposition]="chartstyle.legend.position" [legendlayout]="chartstyle.legend.layout"
      [legendshowpercent]="chartstyle.legend.showpercent" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle" [tooltipshowpercent]="chartstyle.tooltip.showpercent"></lb-stack-pie>
      <lb-stack-strip *ngIf="type=='stackstrip'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position" [tooltipshow]="chartstyle.tooltip.show"
      [tooltipshowtitle]="chartstyle.tooltip.showtitle"></lb-stack-strip>
    <lb-value-table *ngIf="type=='valuetable'&&tfdata" [height]="height" [data]="tfdata"
      [position]="position"  ></lb-value-table>
    <lb-basic-wordcloud *ngIf="type=='basicwordcloud'&&tfdata" [height]="height" [data]="tfdata"
    [position]="position"   [tooltipshow]="chartstyle.tooltip.show"
    [tooltipshowtitle]="chartstyle.tooltip.showtitle" ></lb-basic-wordcloud>

    <lb-basic-strip *ngIf="type=='basicstrip'&&tfdata" [height]="height" [data]="tfdata" [position]="position" [pillarcolor]="chartstyle.pillar.color" [tooltipshow]="chartstyle.tooltip.show"
    [tooltipshowtitle]="chartstyle.tooltip.showtitle" [tooltipshowpercent]="chartstyle.tooltip.showpercent"></lb-basic-strip>
    
    <lb-data-card  *ngIf="type=='datacard'&&tfdata" [height]="height" [data]="tfdata" [position]="position" ></lb-data-card>
  </nz-card>
</div>
